<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/react.development.js"></script>
    <script src="lib/react-dom.development.js"></script>
    <script src="lib/babel.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
    // 表单需要了解两个地方：
    //  1- 如何收集表单数据
    //  2- 如何设置表单初始值
    // defaultValue在第一次加载时提供的值
    const root = ReactDOM.createRoot(document.querySelector("#root"));
    const {createRef} = React;
    class App extends React.Component {
        dataInit = {
            userName:"zhangsan",
            passWord:123456,
            city:"2",
            sex:"1",
            hobby:["1","3"]
        }
        myForm = {
            userName:createRef(),
            passWord:createRef(),
            city:createRef(),
            sex:[createRef(),createRef()],
            hobby:[createRef(),createRef(),createRef(),createRef()],
        }
        submitHandler(e){
            e.preventDefault();
            console.log("用户名：",this.myForm.userName.current.value);
            console.log("密码：",this.myForm.passWord.current.value);
            console.log("城市：",this.myForm.city.current.value);
            console.log("城市：",this.myForm.sex.find(v=>v.current.checked).current.value);
            console.log("爱好：",this.myForm.hobby.filter(v=>v.current.checked).map(v=>v.current.value));
        }
        render() {
            return (
                <form onSubmit={this.submitHandler.bind(this)}>
                    <p>用户名：<input ref={this.myForm.userName} defaultValue={this.dataInit.userName} type="text"/></p>
                    <p>密码：<input ref={this.myForm.passWord} defaultValue={this.dataInit.passWord} type="password"/></p>
                     <p>
                        所在城市：
                        <select name="city" ref={this.myForm.city} defaultValue={this.dataInit.city}>
                            <option value="1">北京</option>
                            <option value="2">上海</option>
                            <option value="3">武汉</option>
                            <option value="4">西安</option>
                            <option value="5">深圳</option>
                            <option value="6">南白滩</option>
                        </select>


                    </p>
                   <p>
                        性别：
                        <input type="radio" ref={this.myForm.sex[0]} defaultChecked={this.dataInit.sex==="1"} name={"sex"} value={1}/>男
                        <input type="radio" ref={this.myForm.sex[1]} defaultChecked={this.dataInit.sex==="2"} name={"sex"} value={2}/>女
                    </p>
                    <p>
                        爱好：
                        <input type="checkbox" name={"hobby"} ref={this.myForm.hobby[0]}  defaultChecked={this.dataInit.hobby.includes("1")} value={1}/>学习
                        <input type="checkbox" name={"hobby"} ref={this.myForm.hobby[1]}  defaultChecked={this.dataInit.hobby.includes("2")} value={2}/>电影
                        <input type="checkbox" name={"hobby"} ref={this.myForm.hobby[2]}  defaultChecked={this.dataInit.hobby.includes("3")} value={3}/>游戏
                        <input type="checkbox" name={"hobby"} ref={this.myForm.hobby[3]}  defaultChecked={this.dataInit.hobby.includes("4")} value={4}/>视频
                    </p>

                    <button>提交</button>
                </form>
            )
        }
    }

    root.render(<App/>)
</script>
</html>